<template>
  <div class="dashboard-container">
    <div class="welcome-card">
      <h2>欢迎使用虾塘养殖管理系统</h2>
      <p>当前系统运行正常，所有设备在线</p>
    </div>

    <div class="stats-grid">
      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>虾塘数量</span>
          </div>
        </template>
        <div class="card-content">
          <div class="stat-number">8个</div>
          <div class="stat-desc">总计养殖面积 200亩</div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>今日投喂次数</span>
          </div>
        </template>
        <div class="card-content">
          <div class="stat-number">3次</div>
          <div class="stat-desc">最后一次投喂: 16:30</div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>水质监测</span>
          </div>
        </template>
        <div class="card-content">
          <div class="stat-number status-normal">正常</div>
          <div class="stat-desc">pH: 7.2, 温度: 28°C</div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>设备状态</span>
          </div>
        </template>
        <div class="card-content">
          <div class="stat-number status-normal">全部在线</div>
          <div class="stat-desc">12个设备正常运行</div>
        </div>
      </el-card>
    </div>

    <div class="actions-grid">
      <el-card class="action-card" @click="navigateTo('alarm')">
        <div class="action-icon">🚨</div>
        <div class="action-title">报警管理</div>
        <div class="action-desc">查看和处理报警信息</div>
      </el-card>

      <el-card class="action-card" @click="navigateTo('video')">
        <div class="action-icon">📹</div>
        <div class="action-title">视频监控</div>
        <div class="action-desc">实时查看虾塘情况</div>
      </el-card>

      <el-card class="action-card" @click="navigateTo('device')">
        <div class="action-icon">📱</div>
        <div class="action-title">设备管理</div>
        <div class="action-desc">管理养殖设备</div>
      </el-card>

      <el-card class="action-card" @click="navigateTo('data')">
        <div class="action-icon">📊</div>
        <div class="action-title">数据统计</div>
        <div class="action-desc">查看养殖数据报表</div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();

const navigateTo = (page) => {
  ElMessage.info(`跳转到${page}页面`);
  router.push(`/${page}`);
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.welcome-card h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.welcome-card p {
  margin: 0;
  color: #666;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.card-header {
  font-weight: bold;
  color: #333;
}

.card-content {
  text-align: center;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #1b9a7c;
  margin-bottom: 8px;
}

.status-normal {
  color: #67c23a;
}

.stat-desc {
  font-size: 14px;
  color: #666;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.action-card {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 20px;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.action-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.action-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.action-desc {
  font-size: 14px;
  color: #666;
}
</style>
